<template>
  <div>
    <div class="mainTitle">TCFE-helper UI</div>
    <div class="tab" v-for="(item, index) in examplePagesInfo" :key="item.name + index" @click="goNextPage(item.url)">
      {{item.name}}
      <svg viewBox="0 0 1024 1024" class="demo-icon">
        <path fill="#B6C3D2" d="M601.1 556.5L333.8 289.3c-24.5-24.5-24.5-64.6 0-89.1s64.6-24.5 89.1 0l267.3 267.3c24.5 24.5 24.5 64.6 0 89.1-24.5 24.4-64.6 24.4-89.1-.1z"></path>
        <path fill="#B6C3D2" d="M690.2 556.5L422.9 823.8c-24.5 24.5-64.6 24.5-89.1 0s-24.5-64.6 0-89.1l267.3-267.3c24.5-24.5 64.6-24.5 89.1 0 24.5 24.6 24.5 64.6 0 89.1z"></path>
      </svg>
    </div>
    <div class="goback">
      <van-button class="demo-vant-btn" type="primary">引入vant</van-button>
    </div>
  </div>
</template>

<script>
import { getLocation } from '$common/mixin'
// import { Button } from 'vant'
export default {
  name: 'el-index',
  // components: {
  //   [Button.name]: Button
  // },
  mixins: [getLocation],
  data() {
    return {
      examplePagesInfo: [
        {
          url: '/arrows',
          name: '箭头组件'
        },
        {
          url: '/round',
          name: '圆形组件'
        },
        {
          url: '/gallery',
          name: '画廊组件'
        },
        {
          url: '/loading',
          name: '加载状态组件'
        },
        {
          url: '/swiper',
          name: '轮播图组件'
        },
        {
          url: '/to_top',
          name: '置顶组件'
        },
        {
          url: '/choose_city',
          name: '选择城市页'
        },
        {
          url: '/choose_multi',
          name: '城市、日期、价格、排序选择级联'
        },
        {
          url: '/fixed_ball',
          name: '可拖拽悬浮球'
        },
        {
          url: '/smart_fixed_ball',
          name: '智能悬浮球'
        }
      ]
    }
  },
  created() {
    this.getLocation_Open()
  },
  methods: {
    goNextPage(path) {
      this.$router.push(path)
    },
    // 扫码到手机和本身模拟器都是失败的，只有打包之后部署到真机上，访问是可以获得城市的
    getLocation_Succeed(city) {
      console.log('定位成功::::' + city)
    },
    getLocation_Failed() {
      // console.log('开启定位:::: 失败了')
    }
  }
}
</script>

<style lang="less" scoped>
.tab {
  margin: 15px 10px;
  padding-left: 40px;
  color: #323233;
  font-weight: 600;
  font-size: 28px;
  line-height: 80px;
  background: #f7f8fa;
  border-radius: 99px;
  position: relative;
  .demo-icon {
    position: absolute;
    top: 50%;
    right: 32px;
    width: 32px;
    height: 32px;
    margin-top: -16px;
  }
}
.mainTitle {
  font-size: 56px;
  font-weight: bold;
  margin: 20px;
  text-align: center;
}
.goback {
  width: 100%;
  text-align: center;
  display: none;
}
</style>
